<template>
  <el-dialog
    :title="'换绑监测'"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    append-to-body
    width="960px"
  >
    <div >
      <el-table :data="tableList" 
             height="500px"
            >
            <el-table-column  label="手机号"  prop="telephone" />
            <el-table-column  label="qq账号"  prop="qq" />
            <el-table-column  label="手机号"  prop="bindTel" />
            <el-table-column  label="商品ID"  prop="accountMonitoringId" />
            <el-table-column  label="掉绑状态"  prop="saleState">
              <template slot-scope="scope">
                
                  <el-tag  :type="statusMap[scope.row.status] ? statusMap[scope.row.status].type : ''">{{
                  statusMap[scope.row.status] ? statusMap[scope.row.status].label : '' }}</el-tag>
           
              </template>
            </el-table-column>
          </el-table>
          <div class="" style="margin-top:10px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 40, 50, 60]" :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
          </div>
          
    </div>
  </el-dialog>
</template>

<script>
import goodsListApi from "@/api/gameConfig/goodsList";
export default {
  name: "push",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      accountId: '',
      tableList:[],
      statusMap:{
        1:{
          type:'success',
          label:'在绑'
        },
        2:{
          type:'danger',
          label:'不在绑'
        },
        4:{
          type:'info',
          label:'账号错误'
        },
      },
      queryParams:{
        pageNum:1,
        pageSize:20,
        accountMonitoringId:''
      },
      total:0
    };
  },
  components:{
   
  },
  created() {
    // this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
  },
  methods: {
    open(id){
      this.dialogVisible = true;
      this.accountId = id
      this.getList()
    },
    getList(){
      this.queryParams.accountMonitoringId = this.accountId
      goodsListApi.monitoringlist(this.queryParams).then(res=>{
        this.tableList = res.rows
        this.total = res.total
      })
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    close() {
      this.dialogVisible = false;
    }
  }
};
</script>
<style scoped lang="css">
.center {
  text-align: center;
}
.form-box {
  /* height: calc(100vh - 20vh - 100px); */
  /* overflow-y: auto; */
  /* overflow-x: hidden; */
  /* padding-top: 20px; */
}
</style>
